/**
 * Created by ClearLiang on 2019/4/15
 * Function:
 * Desc:
 */
import React from 'react';
import {Animated, Easing, StyleSheet, View, TouchableOpacity} from 'react-native';

export default class Animation_1 extends React.Component {
    // 初始化state
    constructor(props) {
        super(props);
        this.state = {
            isOver: 2,/* 0:结束 1:开始 2:暂停 */
            bounceValue: new Animated.Value(0),                 // 缩放
            rotateValue: new Animated.Value(0),                 // 旋转
            translateValue: new Animated.ValueXY({x: 0, y: 0}), // 二维坐标
            fadeOutOpacity: new Animated.Value(1),              // 淡出
        };

        this.myAnimation = Animated.sequence(
            [
                Animated.sequence([  //  组合动画 parallel（同时执行）、sequence（顺序执行）、stagger（错峰，其实就是插入了delay的parrllel）和delay（延迟）
                    Animated.spring( //  基础的单次弹跳物理模型
                        this.state.bounceValue,
                        {
                            toValue: 0.8,
                            friction: 1, // 摩擦力，默认为7.
                            tension: 40, // 张力，默认40。
                        }
                    ),
                    Animated.delay(1000), // 配合sequence，延迟2秒
                    Animated.timing( // 从时间范围映射到渐变的值。
                        this.state.rotateValue,
                        {
                            toValue: 1,
                            duration: 2000, // 动画持续的时间（单位是毫秒），默认为500
                            easing: Easing.out(Easing.quad), // 一个用于定义曲线的渐变函数
                            delay: 0, // 在一段时间之后开始动画（单位是毫秒），默认为0。
                        }
                    ),
                    Animated.decay( // 以一个初始速度开始并且逐渐减慢停止。  S=vt-（at^2）/2   v=v - at
                        this.state.translateValue,
                        {
                            velocity: 10, // 起始速度，必填参数。
                            deceleration: 0.8, // 速度衰减比例，默认为0.997。
                        }
                    ),

                ]),
                Animated.timing(
                    this.state.fadeOutOpacity,
                    {
                        toValue: 0,
                        duration: 2000,
                        easing: Easing.linear, // 线性的渐变函数
                    }
                ),
            ]
        );
    }

    render() {

        return (
            <TouchableOpacity style={styles.container} onPress={()=>{this._onClick()}}>
                <Animated.View
                    style={{
                        transform: [  // scale, scaleX, scaleY, translateX, translateY, rotate, rotateX, rotateY, rotateZ
                            {scale: this.state.bounceValue},  // 缩放
                            {
                                rotate: this.state.rotateValue.interpolate({ // 旋转，使用插值函数做值映射
                                    inputRange: [0, 1],
                                    outputRange: ['0deg', '360deg'],
                                })
                            },
                            {translateX: this.state.translateValue.x}, // x轴移动
                            {translateY: this.state.translateValue.y}, // y轴移动
                        ],
                        opacity: this.state.fadeOutOpacity,//淡出
                    }}
                >
                    {this.props.children}
                </Animated.View>
            </TouchableOpacity>

        );
    }

    _onClick() {
        if (this.state.isOver === 0) {
            this.resetAnimation();
        } else if (this.state.isOver === 1) {
            this.stopAnimation();
        } else {
            this.startAnimation();
        }
    }

    startAnimation() {
        if (this.state.isOver === 2) {
            this.setState({
                isOver: 1,
            });
            this.myAnimation.start((result) => {
                if (result.finished) {
                    this.resetAnimation();
                } else {
                    this.setState({
                        isOver: 2,
                    });
                }
            });
        }
    }

    stopAnimation() {
        this.myAnimation.stop();
    }

    resetAnimation() {
        this.state.bounceValue.setValue(1.5);     // 设置一个较大的初始值
        this.state.rotateValue.setValue(0);
        this.state.translateValue.setValue({x: 0, y: 0});
        this.state.fadeOutOpacity.setValue(1);

        this.setState({
            isOver: 2,
        });

        // 监听值的变化
        this.state.rotateValue.addListener((state) => {
            console.log("rotateValue=>" + state.value);
        });

        // ValueXY
        this.state.translateValue.addListener((value) => {
            console.log("translateValue=>x:" + value.x + " y:" + value.y);
        });

        this.state.fadeOutOpacity.addListener((state) => {
            console.log("fadeOutOpacity=>" + state.value);
        });
    }

    componentDidMount() {
        this.resetAnimation();
    }
}

// 构建样式
const styles = StyleSheet.create({
    container: {},
    anima: {},
});

